<template>
    <div class="pop-service-select-xxx">
        <el-dialog title="选择人员" :visible.sync="dialogVisible" append-to-body
		:modal-append-to-body="false" :close-on-click-modal="false">
            <div class="list-box-sxx" v-infinite-scroll="loadFun">
                <div class="list" v-if="list_data.length > 0">
                    <div
                        class="list-row"
                        v-for="item in list_data"
                        :key="item.id"
                        @click="cheproject(item)"
                    >
                        <div class="list-info">
                            <div class="img-box">
                                <img
                                    :src="item.avatar ? item.avatar : img_buf"
                                    alt=""
                                />
                            </div>
                            <div class="info-box">
                                <div class="title">
                                    <span>{{ item.name }}</span>
                                    <span
                                        class="tag"
                                        v-if="
                                            item.position_title ||
                                            item.positionname
                                        "
                                        >{{
                                            item.position_title ||
                                            item.positionname
                                        }}</span
                                    >
                                </div>
                                <div class="phone">
                                    <span>{{ item.cellphone }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="list-avitve" v-show="item.is_avitve">
                            <i class="el-icon-check"></i>
                        </div>
                    </div>
                </div>
                <empty v-else />
            </div>
            <span
                slot="footer"
                class="dialog-footer"
                v-if="page_i == 4 && selectType == 1"
            >
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="determineFun"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import config from "@/js/conf/Config.js";
import empty from "../comm/empty.vue";

export default {
    name: "popServiceSelect",
    components: { empty },
    props: ["page_i", "page_show_i"],
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            dialogVisible: false,
            is_soll: false,
            list_data: [],
            selectedData: [],
            selectType: "1",
            searchform: {
                pfrom: -20,
                pnum: 20,
                ch: "2",
            },
			
			callBack:null,
        };
    },
    methods: {
        initData(data) {
            if (this.page_i == 4) {
                this.emptyData();
                this.selectedData = data.list;
                this.selectType = data.selectType;
				if(data.back)
					this.callBack = data.back;
                this.getlistdata();
            }
            this.dialogVisible = true;
        },
        // 确认选择服务人
        determineFun() {
            this.$emit("getServiceData", this.selectedData);
            this.dialogVisible = false;
        },
        // 选中服务人
        cheproject(item) {
            if (this.selectType == 2 && this.page_i == 4 && item.is_avitve)
                return;
            if (
                this.page_i == 3 ||
                this.page_show_i == 3 ||
                (this.selectType == 2 && this.page_i == 4)
            ) {
                let data = {};
                this.list_data.map((v) => {
                    if (v.id == item.id) {
                        data = v;
                    }
                });
                this.$emit("destroyEditing");
				
				if(!this.callBack)
				{
					 this.$emit("getServiceData", data);
				}
				else
				{
					// this.callBack(data);
					this.callBack.apply(null,[data]);
					this.callBack = null;
				}	
                this.dialogVisible = false;
            } else {
                item.is_avitve = !item.is_avitve;
                this.selectedData = [];
                this.list_data.map((v) => {
                    if (v.is_avitve) {
                        this.selectedData.push(v);
                    }
                });
            }
        },
        // 滚动加载
        loadFun() {
            if (this.is_soll) return;
            this.searchform.pfrom += 20;
            this.getlistdata();
        },
        // 获取服务人列表
        async getlistdata() {
            this.is_soll = true;
            let url =
                this.page_i == 3 || this.page_show_i == 3
                    ? config.YY_YUYUE_BOOK_WORKER_LS
                    : this.page_i == 4
                    ? config.COMPANY_STAFF_LS
                    : "";
            let param = this.searchform;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                const listData = res.data.staff_ls || res.data.ls;
                if (listData) {
                    listData.map((v) => {
                        v.is_avitve = false;
                        if (!v.id) {
                            v.id = v.staffid;
                        }
                        if (this.selectedData.length > 0) {
                            this.selectedData.map((vs) => {
                                if (v.id == vs.id) {
                                    v.is_avitve = true;
                                }
                            });
                        }
                    });
                    this.list_data = this.list_data.concat(listData);
                    setTimeout(() => {
                        this.is_soll = false;
                    }, 200);
                } else {
                    this.is_soll = true;
                }
            }
        },
        // 清空数据
        emptyData() {
            this.searchform.pfrom = 0;
            this.list_data = [];
            this.selectedData = [];
            this.is_soll = false;
        },
    },
};
</script>   

<style lang="scss" scoped>
// .pop-service-select-xxx {
    .list-box-sxx {
        height: 500px;
        overflow: auto;
        .list-row {
            padding: 10px 0;
            border-bottom: 1px #f2f2f2 solid;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 30px;
            cursor: pointer;
            .list-info {
                display: flex;
                .img-box {
                    width: 80px;
                    height: 80px;
                    margin-right: 10px;
                    border-radius: 5px;
                    background: #eaeaea;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    span {
                        font-size: 16px;
                        font-weight: bold;
                    }
                }
                .info-box {
                    .title {
                        font-size: 14px;
                        span {
                            margin-right: 10px;
                        }
                        .tag {
                            font-size: 12px;
                            padding: 0 3px 2px;
                            border: 1px #ff7b23 solid;
                            color: #ff7b23;
                            border-radius: 3px;
                        }
                    }
                    .phone {
                        font-size: 12px;
                        color: #9c9a9a;
                        margin: 5px 0;
                        span {
                            margin-right: 10px;
                        }
                    }
                    .tiem {
                        font-size: 12px;
                    }
                }
            }
            .list-avitve {
                font-size: 20px;
                color: #3388ff;
            }
        }
    }
    .list-box::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .list-box::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        background: #ccc; //rgba(0, 0, 0, 0.0);
        scrollbar-arrow-color: red;
    }
    .list-box::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
    }
// }
</style>